<template>
	<div class="home" id="home" name="home">

		<!-- 轮播图 -->
		<div class="block">
			<el-carousel height="460px">
				<el-carousel-item v-for="item in carousel" :key="item.carousel_id">
					<img style="height:460px;" :src="$target + item.imgPath" :alt="item.describes" />
				</el-carousel-item>
			</el-carousel>
		</div>
		<!-- 轮播图END -->

		<div class="main-box">
			<div class="main">
				<!-- 精选作品展示区域 -->
				<div class="phone">
					<div class="box-hd">
						<div class="title">精选作品</div>
					</div>
										<div class="box-bd myList" id="myList">
											<!-- 左部 -->
											<div class="promo-list">
												<router-link to>
													<img :src="$target +'public/imgs/phone/phone.png'" />
												</router-link>
											</div>
											<!-- 右部 -->
											<div class="list">
												<ul>
													<li v-for="(item, index) in productStaticList" :key="index">
														<router-link :to="{ path: '/goods/details', query: {productID:item.id} }">
					
															<img style="margin-top: 15px;" :src="item.image" alt />
					
															<h2>{{item.name}}</h2>
															<h3>{{item.description}}</h3>
															<p>
																<span>{{item.price}} 元</span>
															</p>
															<el-button type="text" class="button"></el-button>
					
														</router-link>
													</li>
					
													<li id="more">
														<router-link :to="{ path: '/goods'}">
															浏览更多
															<i class="el-icon-d-arrow-right"></i>
														</router-link>
													</li>
												</ul>
											</div>
										</div>
				</div>
				<!-- 精选作品展示区域END -->


				<!-- 艺术馆动态展示区域 -->
				<div class="phone">
					<div class="box-hd">
						<div class="title">艺术馆</div>
					</div>

					<div class="box-bd myList" id="myList">
						<!-- 左部 -->

						<!-- 右部 -->
						<div class="list">
							<ul>
								<li v-for="(item, index) in museumList" :key="item.id">
									<router-link :to="{ path: '/goods/details', query: {productID:item.product_id} }">
										<img style="margin-top: 40px;" :src="item.image" alt />
										<h2>{{item.name}}</h2>
									</router-link>
								</li>

								<li id="more">
									<router-link :to="{ path: '/goods'}">
										浏览更多
										<i class="el-icon-d-arrow-right"></i>
									</router-link>
								</li>
							</ul>
						</div>

					</div>
				</div>
				<!-- 艺术馆动态展示区域END -->

				<!-- 著名作家展示区域 -->
				<div class="phone">
					<div class="box-hd">
						<div class="title">艺术家</div>
					</div>

					<div class="box-bd myList" id="myList">
						<!-- 左部 -->

						<!-- 右部 -->
						<div class="list">
							<ul>
								<li v-for="(item, index) in allAuthorList" :key="item.id">
									<router-link :to="{ path: '/goods/details', query: {productID:item.product_id} }">
										<el-avatar style="width: 100px;height: 100px;margin-left: 70px;margin-top: 80px;" :src="item.avatar" alt />
										<h2>{{item.name}}</h2>
									</router-link>
								</li>

							</ul>
						</div>

						<div class="promo-list">
							<router-link to>
								<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=245441011,1572836255&fm=26&gp=0.jpg" />
							</router-link>
						</div>

					</div>
				</div>
				<!-- 著名作家展示区域END -->
			</div>
		</div>
	</div>
</template>

<script>
	import authorApi from '../api/author.js'
	import museumApi from '../api/museum.js'
	import productApi from '../api/product.js'
	
	export default {
		data() {
			return {
				currentDate: new Date(), //系统时间
				carousel: [], // 轮播图数据 
				carousel: "", // 轮播图数据 
				phoneList: "", // 手机商品列表
				productStaticList: [],
				museumList: [],
				allAuthorList: []
			}
		},
		activated() {
			this.getTabCard()
			this.getProductsList()
			this.getAllAuthor()
			this.getAllMuseum()
		},
		methods: {
			// 拿到一定数量的商品
			getProductsList() {
				productApi.goSearch({
					"page":1,
					"limit":7
				}).then(res=>{
					this.productStaticList = res.page.list
				})
			},
			//得到所有的作者
			getAllAuthor() {
				authorApi.getAllAuthorList()
					.then(res => {
						this.allAuthorList = res.data
					})
			},
			
			//得到所有的博物馆
			getAllMuseum(){
				museumApi.getAllMuseumList()
				.then(res =>{
					this.museumList = res.data
				})
			},


			TabCardClick() {
				console.log('选择了轮播图');
			},
			getTabCard() {
				this.carousel = [{
					"carousel_id": 1,
					"imgPath": "public/imgs/cms_1.jpg",
					"describes": "123456"
				}, {
					"carousel_id": 2,
					"imgPath": "public/imgs/cms_2.jpg",
					"describes": "123456"
				}, {
					"carousel_id": 3,
					"imgPath": "public/imgs/cms_3.jpg",
					"describes": "123456"
				}, {
					"carousel_id": 4,
					"imgPath": "public/imgs/cms_4.jpg",
					"describes": "123456"
				}]
			}
		}
	}
</script>


<style scoped>
	@import "../assets/css/index.css";

	/* 卡片样式 */
	.time {
		font-size: 13px;
		color: #999;
	}

	.bottom {
		margin-top: 13px;
		line-height: 12px;
	}

	.button {
		padding: 0;
		float: right;
	}

	.image {
		width: 100%;
		display: block;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.myList ul li {
		z-index: 1;
		float: left;
		width: 234px;
		height: 280px;
		padding: 10px 0;
		margin: 0 0 14.5px 13.7px;
		background-color: white;
		-webkit-transition: all 0.2s linear;
		transition: all 0.2s linear;
		position: relative;
	}

	.myList ul li:hover {
		z-index: 2;
		-webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
		box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
		-webkit-transform: translate3d(0, -2px, 0);
		transform: translate3d(0, -2px, 0);
	}

	.myList ul li img {
		display: block;
		width: 160px;
		height: 160px;
		background: url(../assets/imgs/placeholder.png) no-repeat 50%;
		margin: 0 auto;
	}

	.myList ul li h2 {
		margin: 25px 10px 0;
		font-size: 14px;
		font-weight: 400;
		color: #333;
		text-align: center;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.myList ul li h3 {
		margin: 5px 10px;
		height: 18px;
		font-size: 12px;
		font-weight: 400;
		color: #b0b0b0;
		text-align: center;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.myList ul li p {
		margin: 10px 10px 10px;
		text-align: center;
		color: #ff6700;
	}

	.myList ul li p .del {
		margin-left: 0.5em;
		color: #b0b0b0;
		text-decoration: line-through;
	}

	.myList #more {
		text-align: center;
		line-height: 280px;
	}

	.myList #more a {
		font-size: 18px;
		color: #333;
	}

	.myList #more a:hover {
		color: #ff6700;
	}

	.myList ul li .delete {
		position: absolute;
		top: 10px;
		right: 10px;
		display: none;
	}

	.myList ul li:hover .delete {
		display: block
	}

	.myList ul li .delete:hover {
		color: #ff6700;
	}

	.el-carousel__item h3 {
		color: #475669;
		font-size: 14px;
		opacity: 0.75;
		line-height: 200px;
		margin: 0;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}
</style>
